<!DOCTYPE html>
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            width: 862px;
            height: 515px;
            border: 2px solid tan;
            margin: 50px auto;
            position: relative;
        }
        .top{
            width: 50%;
            position: absolute;
            left: 0;
            z-index: 1;
            overflow: hidden;
        }
        .bar{
            width: 5px;
            height: 100%;
            background: orange;
            position: absolute;
            left: 50%;
            top: 0;
            z-index: 2;
        }
    </style>
    <script  type="text/javascript" src="./jquery.js"></script>
    <script>
        window.onload = function(){
            var content = document.getElementById("content")
            var top = content.getElementsByTagName("div")[0]
            var bottom = content.getElementsByTagName("div")[1]
            var bar = content.getElementsByTagName("div")[2]
       
        //鼠标在图片上移动
        content.onmousemove = function(e){
            var e  = e || event;
            var left =  e.clientX - this.offsetLeft;
            if(left < 0){
                left = 0;
            }else if(left>= this.offsetWidth-bar.offsetWidth){
                left = this.offsetWidth-bar.offsetWidth;
            }
            bar.style.left = left + "px"
            bar.style.transition = ""
            top.style.width = left + "px"
            top.style.transition = ""
        }
        //鼠标离开图片
        content.onmouseout = function(){
            bar.style.left = "50%";
            bar.style.transition = "2s";
            top.style.width = "50%";
            top.style.transition = "2s"
        }
    }
    </script>
</head>
<body>
    <div id="content">
        <div class="top">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="bottom">
            <img src="./img/2.jpg" alt="">
        </div>
        <div class="bar"></div>
    </div>
</body>
</html>